<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<template v-if="token&&isLogin">
			<template v-if="loadingState.default">
				<loading :loadingState="loadingState"></loading>
			</template>
			<template v-else>
				<view class="body">
					<view class="change-btn">
						<view class="select-data">设备名称：{{dev_name}}</view>
					</view>
					<!-- 详情状态 -->
					<!-- battery_status: "",//电池状态,daybreak_status: "",//天亮状态,dumping_status: "",//倾倒状态,light_status: "",//开灯状态,rain_status: "",//下雨状态,timing_time: "",//定时时间 ,battery_type: "1",//电池类型 -->
					<template v-if="!isSetting">
						<view class="detail-wrap m-t2">
							<view class="detail-item">
								<view class="label">电池状态</view>
								<view class="detail-switch">
									<view class="state">{{params.battery_status==1?'电压低':'正常'}}</view>
									<switch color="#3399FF" :checked="params.battery_status==1?true:false" disabled>
									</switch>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">天亮状态</view>
								<view class="detail-switch">
									<view class="state">{{params.daybreak_status==1?'天亮':'天黑'}}</view>
									<switch color="#3399FF" :checked="params.daybreak_status==1?true:false" disabled>
									</switch>
								</view>
							</view>

							<view class="detail-item">
								<view class="label">倾倒状态</view>
								<view class="detail-switch">
									<view class="state">{{params.dumping_status==1?'倾倒':'正常'}}</view>
									<switch color="#3399FF" :checked="params.dumping_status==1?true:false" disabled>
									</switch>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">开灯状态</view>
								<view class="detail-switch">
									<view class="state">{{params.light_status==1?'开灯':'关灯'}}</view>
									<switch color="#3399FF" :checked="params.light_status==1?true:false" disabled>
									</switch>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">下雨状态</view>
								<view class="detail-switch">
									<view class="state">{{params.rain_status==1?'下雨':'正常'}}</view>
									<switch color="#3399FF" :checked="params.rain_status==1?true:false" disabled>
									</switch>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">电池类型</view>
								<view class="detail-input">
									<view class="content">
										<view class="val t-r">
											{{battery_type_data[params.battery_type-1]}}
										</view>
									</view>
									<view class="icon">
										<view class="iconfont f-s26">&#xe653;</view>
									</view>
								</view>
							</view>
							<!-- timing_time: "",//定时时间 ,battery_type: "1",//电池类型 -->
							<view class="detail-item">
								<view class="label">定时时间</view>
								<view class="detail-input">
									<view class="content">
										<view class="val t-r">{{params.timing_time||'0'}}小时</view>
									</view>
									<view class="icon">
										<view class="iconfont f-s26">&#xe653;</view>
									</view>
								</view>
							</view>
						</view>
					</template>

					<!-- 设置状态 -->
					<template v-else>
						<view class="form-wrap m-t2">
							<view class="form-item">
								<view class="label">电池状态</view>
								<view class="detail-switch">
									<view class="state">{{params.battery_status==1?'电压低':'正常'}}</view>
									<switch color="#3399FF" :checked="params.battery_status==1?true:false"
										@change="changeSwitch($event,'battery_status')">
									</switch>
								</view>
							</view>
							<view class="form-item">
								<view class="label">天亮状态</view>
								<view class="detail-switch">
									<view class="state">{{params.daybreak_status==1?'天亮':'天黑'}}</view>
									<switch color="#3399FF" :checked="params.daybreak_status==1?true:false"
										@change="changeSwitch($event,'daybreak_status')">
									</switch>
								</view>
							</view>

							<view class="form-item">
								<view class="label">倾倒状态</view>
								<view class="detail-switch">
									<view class="state">{{params.dumping_status==1?'倾倒':'正常'}}</view>
									<switch color="#3399FF" :checked="params.dumping_status==1?true:false"
										@change="changeSwitch($event,'dumping_status')">
									</switch>
								</view>
							</view>
							<view class="form-item">
								<view class="label">开灯状态</view>
								<view class="detail-switch">
									<view class="state">{{params.light_status==1?'开灯':'关灯'}}</view>
									<switch color="#3399FF" :checked="params.light_status==1?true:false"
										@change="changeSwitch($event,'light_status')">
									</switch>
								</view>
							</view>
							<view class="form-item">
								<view class="label">下雨状态</view>
								<view class="detail-switch">
									<view class="state">{{params.rain_status==1?'下雨':'正常'}}</view>
									<switch color="#3399FF" :checked="params.rain_status==1?true:false"
										@change="changeSwitch($event,'rain_status')">
									</switch>
								</view>
							</view>
							<view class="form-item">
								<view class="label">电池类型</view>
								<picker class="form-picker" mode="selector" :range="battery_type_data"
									@change="changeBatteryType" :value="params.battery_type-1">
									<view class="picker">
										<view class="select-data t-l">{{battery_type_data[params.battery_type-1]}}
										</view>
										<view class="icon">
											<view class="iconfont f-s26">&#xe653;</view>
										</view>
									</view>
								</picker>
							</view>
							<!-- timing_time: "",//定时时间 ,battery_type: "1",//电池类型 -->
							<view class="form-item">
								<view class="label">定时时间</view>
								<picker class="form-picker" mode="selector" :range="date_list"
									@change="changeBatteryDate">
									<view class="picker">
										<view class="select-data t-l">{{params.timing_time}}小时
										</view>
										<view class="icon">
											<view class="iconfont f-s26">&#xe653;</view>
										</view>
									</view>
								</picker>
							</view>
						</view>

					</template>
				</view>
				<view class="footer">
					<view class="fix-wrap bottom">
						<view v-if="!isSetting" class="submit-btn" @click="showSetting">设置</view>
						<view v-else class="submit-btn" @click="saveSetting">保存设置</view>
					</view>
				</view>
			</template>
		</template>
	</view>
</template>

<script>
	import formdemo from '@/components/form.vue'
	import loading from '@/components/loading-more.vue'
	export default {
		name: 'name',
		data() {
			return {
				dev_id: '',
				dev_name: '',
				isLogin: false,
				isIphoneX: getApp().globalData.isIphoneX,
				appid: getApp().globalData.appid,
				token: uni.getStorageSync('token'),
				userInfo: uni.getStorageSync('userInfo'),
				loginStateUpdate: false,
				isStop: true,
				loadingState: {
					default: true
				},
				isSetting: false,
				detail: {},
				params: {
					device_id: "",
					device_name: "",
					device_number: "",

					battery_status: "", //电池状态
					daybreak_status: "", //天亮状态
					dumping_status: "", //倾倒状态
					light_status: "", //开灯状态
					rain_status: "", //下雨状态
					timing_time: "", //定时时间
					battery_type: "1", //电池类型
				},
				battery_type_data: ["铅酸", "三串锂电池", "4串磷酸锂铁"],
				date_list: []
			}
		},
		async onLoad(params) {
			this.dev_id = params.dev_id;
			this.dev_name = params.dev_name;
			this.date_list = Array.from(Array(24)).map((v, k) => k + 1 + '小时');
			if (this.token) {
				this.isLogin = await this.$loginState('check');
				if (this.isLogin) {
					this.detail = await this.getSetList();
					this.setParams();
				} else {
					this.isLogin = await this.$loginState('reset');
				}
			}
		},
		async onShow() {
			if (this.loginStateUpdate) {
				this.token = uni.getStorageSync('token');
				this.userInfo = uni.getStorageSync('userInfo');
				this.isLogin = true;
				this.detail = await this.getSetList();
				this.setParams();
				this.loginStateUpdate = false;
			}

			if (!this.token && !this.isLogin) {
				this.isLogin = await this.$loginState('reset');
			}
		},
		methods: {

			// 获取设备管理详情
			getSetList: async function() {
				let res = await this.$api.tool_api.getSetList({
					appid: this.appid,
					token: this.token,
					user_id: this.userInfo.uid,
					device_id: this.dev_id
				})
				console.log("res", res.data.data)
				if (res.data.ret == 1000) {
					this.loadingState.default = false;
					return res.data.data;
				}
			},

			// 获取设备管理参数
			setParams: function() {
				this.params = {
					...this.detail.list
				};
			},

			// 开关
			changeSwitch: function(e, type) {
				console.log("changeswitch", e.detail.value)
				this.params[type] = e.detail.value ? 1 : 0;
			},

			// 切换电池类型
			changeBatteryType(e) {
				this.params.battery_type = ++e.detail.value;
			},

			// 切换时间
			changeBatteryDate(e) {
				this.params.timing_time = ++e.detail.value;
			},

			// 打开设置
			showSetting: function() {
				this.isSetting = true;
			},

			// 保存设置
			saveSetting: async function() {
				if (this.isStop) {
					this.isStop = false;
					uni.showLoading({
						title: '保存中'
					})

					let res = await this.$api.tool_api.saveYrySet({
						appid: this.appid,
						token: this.token,
						device_id: this.dev_id,
						user_id: this.userInfo.uid,
						battery_status: this.params.battery_status, //电池状态
						daybreak_status: this.params.daybreak_status, //天亮状态
						dumping_status: this.params.dumping_status, //倾倒状态
						light_status: this.params.light_status, //开灯状态
						rain_status: this.params.rain_status, //下雨状态
						timing_time: this.params.timing_time, //定时时间
						battery_type: this.params.battery_type //电池类型
					})
					uni.hideLoading();
					if (res.data.ret == 1000) {
						this.$showToast({
							icon: 'success',
							title: '设置成功'
						}).then(() => {
							setTimeout(async () => {
								this.isStop = true;
								this.isSetting = false;
								this.detail = await this.getSetList();
								this.setParams();
							}, 2000);
						})

					} else {
						this.$showToast({
							icon: 'error',
							title: '设置失败'
						})
						setTimeout(() => {
							this.isStop = true;
						}, 300)
					}
				}


			}


		},
		components: {
			loading
		},
		computed: {

		},
		watch: {

		}

	}
</script>

<style lang="less">
	.submit-btn {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #0085ff;
		color: #fff;
		font-size: 32rpx;
	}

	.work-time {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;

		.start,
		.over {
			flex-grow: 2;
			border: .1rpx solid #ddd;
			text-align: center;
		}

		.line {
			margin: 0 10rpx;
		}

		.disabled {
			background: #f5f5f5;
			color: #999;
		}
	}
</style>
